<template>
    <div>
      <Tabs :value="current" @on-click="tabChange">
        <TabPane label="考试信息" name="0">
          <Card>
            <Form ref='pageModel' :model="pageModel" :rules="ruleInline" label-position="right" inline :label-width='100'>
              <Row>
                <FormItem prop="unifiedName" label="考试名称">
                  <Input v-model="pageModel.unifiedName" placeholder="请输入" :disabled="!isEdit" clearable style="width:200px"></Input>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="startTime" label="考试开始日期">
                  <DatePicker type="date" :options="opFieldTimeStartTime" :disabled="!isEdit" placeholder="请选择" style="width:200px;" v-model="pageModel.startTime"></DatePicker>
                </FormItem>
                <FormItem prop="endTime" label="考试结束日期">
                  <DatePicker type="date" :options="opFieldTimeEndTime" :disabled="!isEdit" placeholder="请选择" style="width:200px;" v-model="pageModel.endTime"></DatePicker>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="type" label="考试类型">
                  <Select v-model="pageModel.type" placeholder="请选择" clearable style="width:200px" :disabled="!isEdit">
                    <Option v-for="(_item,index) in typeArr" :key="index" :value="_item.id">{{_item.title}}</Option>
                  </Select>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="totalScore" label="考题总分值">
                  <InputNumber v-model="pageModel.totalScore" :disabled="!isEdit" placeholder="请输入" clearable style="width:200px" :min="1"></InputNumber>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="itemNum" label="试题数量">
                  <InputNumber v-model="pageModel.itemNum" :disabled="!isEdit" placeholder="请输入" clearable style="width:200px" :min="1"></InputNumber>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="examLength" label="考试时长(分钟)">
                  <InputNumber v-model="pageModel.examLength" :disabled="!isEdit" placeholder="请输入" clearable style="width:200px"></InputNumber>
                </FormItem>
              </Row>
              <Row>
                <FormItem prop="passScore" label="及格分数">
                  <InputNumber v-model="pageModel.passScore" :disabled="!isEdit" placeholder="请输入" clearable style="width:200px"></InputNumber>
                </FormItem>
              </Row>
            </Form>
            <div style="text-align: right">
              <Button @click="cancel" class="m-l-sm">返回</Button>
              <Button @click="save" type="primary" class="m-l-sm" v-if="isEdit">保存</Button>
            </div>
          </Card>
        </TabPane>
        <TabPane label="考卷管理" name="1">
          <Card>
            <Button @click="cancel" type="primary" class="m-l-sm">返回</Button>
            <Button @click="add" class="m-l-sm" v-if="isEdit">新增试题</Button>
            <Row class="m-t-md">
              <Table :loading="loading" :columns="testColumns" stripe border :data="testData"></Table>
              <page-temp :total="count" :current="param.pageNo" :size="param.pageSize" @changePage="changePage"></page-temp>
            </Row>
          </Card>
          <add-test :visible.sync="isTest" :title="testTitle" :unifiedItemId="unifiedItemId" :unifiedId="param.unifiedId" @update="queryTest"></add-test>
        </TabPane>
      </Tabs>
    </div>
</template>
<script>
  import {examType} from '@/libs/util.js';
  import addTest from '@/components/addTest/addTest';
  import {examItemList,deleteUnifiedExamItems,getUnifiedExamDetail,saveUnifiedExam} from '@/api/online-exam';
  import {_examType} from "../../../libs/util";

  export default {
        data() {
            return {
              current: this.$route.params.type === 'examList'?'1':'0',
              isEdit: this.$route.params.isEdit === '1',
              pageModel:{
                unifiedName:'',
                startTime:'',
                endTime:'',
                openFlag:'1',
                totalScore:0,
                examLength:0,
                passScore:0,
                itemNum: 0,
              },
              opFieldTimeStartTime: {
                disabledDate(date) {
                  return date && date.valueOf() < Date.now() - 86400000;
                }
              },
              opFieldTimeEndTime: {
                disabledDate: date => {
                  return date && date.valueOf() < this.pageModel.startTime
                }
              },
              ruleInline: {
                unifiedName: [{ required: true, message: "请输入考试名称" }],
                startTime: [{ required: true, message: "请选择开始时间" }],
                endTime: [{ required: true, message: "请选择结束时间" }],
                totalScore: [{ required: true, message: "请输入总分值" }],
                examLength: [{ required: true, message: "请输入考试时长" }],
                passScore: [{ required: true, message: "请输入及格线" }],
              },
              param:{
                pageSize:10,
                pageNo:1,
                unifiedId:this.$route.params.unifiedId,
              },
              unifiedItemId:null,
              typeArr:examType,
              loading:false,
              isTest: false,
              testTitle:'',
              testColumns:[
                {
                  title: "序号",
                  width: 80,
                  align: "left",
                  render: (h, params) => {
                    return h(
                      "span",
                      this.param.pageSize * (this.param.pageNo - 1) + params.index + 1
                    );
                  }
                },
                {
                  title: '题目名称',
                  key: 'examinationTitle'
                },
                {
                  title: '题型',
                  key: 'examType',
                  render:(h,params) => {
                    return h(
                      "span",
                      _examType(params.row.examType)
                    );
                  }
                },
                {
                  title: '答案',
                  key: 'optionsNames'
                },
                {
                  title: '分值',
                  key: 'score'
                },
                {
                  title: '排序',
                  key: 'sort'
                },
                {
                  title: '操作',
                  render: (h, params) => {
                    let self = this;
                    return h('div', [
                      h(
                        'Button',
                        {
                          props: {type: 'primary', size: 'small'},
                          style: {marginRight: "5px"},
                          on: {
                            click() {
                              self.edit(params.row)
                            }
                          }
                        },
                        '查看详情'
                      ),
                      h(
                        'Poptip',
                        {
                          props: {
                            confirm: true,
                            title: '您确定要删除这条数据吗?',
                            transfer: true
                          },
                          on: {
                            'on-ok': () => {
                              //删除数据
                              self.delTest(params.row)
                            }
                          }
                        },
                        [
                          h(
                            this.isEdit?'Button':'',
                            {
                              props: {type: 'error', size: 'small'},
                              style: {marginRight: "5px"},
                            },
                            '删除'
                          )
                        ]
                      )
                    ]);
                  }
                }
              ],
              testData:[],
              count:0
            }
        },
        components:{
          addTest
        },
        watch: {},
        computed: {},
        created() {
          if(this.current === '0') {
            this.queryDetail()
          }else {
            this.queryTest()
          }
        },
        methods: {
          tabChange(name) {
            if(name === '0') {
              this.$router.push({path:`/applets-management/ball-skill/exam-detail/examInfo/${this.param.unifiedId}/${this.$route.params.isEdit}`})
              this.queryDetail()
            }else {
              this.$router.push({path:`/applets-management/ball-skill/exam-detail/examList/${this.param.unifiedId}/${this.$route.params.isEdit}`})
              this.queryTest()
            }
          },
          cancel() {
            this.$router.push({
              name:'online-exam',
              params:{
                type: '1'
              }
            });
          },
          save() {
            let param = Object.assign({},this.pageModel,{
              unifiedId: this.param.unifiedId
            });
            saveUnifiedExam(param)
              .then(res => {
                this.$router.go(-1)
              })
          },
          add() {
            this.testTitle = '新增试题';
            this.isTest = true;
            this.unifiedItemId = null;
          },
          edit(row) {
            this.testTitle = '查看详情';
            this.isTest = true;
            this.unifiedItemId = row.unifiedItemId
          },
          queryTest() {
            examItemList(this.param)
              .then(res => {
                this.count = res.count;
                this.testData = res.list
              })
          },
          delTest(row) {
            let param = {
              unifiedId: this.param.unifiedId,
              unifiedItemIds:[row.unifiedItemId]
            };
            deleteUnifiedExamItems(param)
              .then(res => {
                this.queryTest()
              })
          },
          queryDetail() {
            getUnifiedExamDetail(this.param.unifiedId)
              .then(res => {
                let content = res;
                this.pageModel.unifiedName = content.unifiedName;
                this.pageModel.remarks = content.remarks;
                this.pageModel.startTime = this.$moment(content.startTime).format("YYYY-MM-DD");
                this.pageModel.endTime = this.$moment(content.endTime).format("YYYY-MM-DD");
                this.pageModel.type = content.type;
                this.pageModel.totalScore = content.totalScore;
                this.pageModel.examLength = content.examLength;
                this.pageModel.passScore = content.passScore;
                this.pageModel.openFlag = content.openFlag;
                this.pageModel.itemNum = content.itemNum;
              })
          },
          changePage(pageNo) {
            this.param.pageNo = pageNo;
            this.queryTest();
          },
        }
    };
</script>
<style scoped>

</style>
